@charset "UTF-8";


/*   FONTS   */

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,700);


@media only screen and (device-width: 768px) {
	.fb-like-box { margin-right:10px; }
.fotoslider { width:145% !important; }
 }
.fotoslider { width:300%; }


/*    MAIN ELEMENTS    */


body {
	margin:0 auto;
	color:#666666;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	overflow-x:hidden;
}




.placeholder_width {				width:100%; float:left; background:white; display:block; }
.placeholder_width.header {			background:url(/img/header.jpg) repeat-x center top; height:126px; display:block; position:fixed; z-index:-1; }
.placeholder_width.hoofdmenu {		margin-top:89px; z-index:987987; }
.placeholder_width.hoofdmenu .placeholder { height:17px; }
.placeholder_width.home { 			background:url(/img/background-home.jpg) repeat-x center top #fff; }
.placeholder_width.locatieroute {	background:url(/img/backline.jpg) repeat-x center top #fff; }
.placeholder_width.overslite {		background:url(/img/back_content_clean.jpg) repeat-x center top #fff; }
.placeholder_width.contact {		background:url(/img/backline.jpg) repeat-x center top #fff; }
.placeholder_width.portfolio {		background:url(/img/back_content_clean.jpg) repeat-x center top #fff; }
.placeholder_width.category_1 {		background:url(/img/background-dark.jpg) repeat-x center top #FFF; height:425px; margin:0px; border-top:5px solid #e0e1e6;  }
.placeholder_width.category_2 {		background:#fff; padding-bottom:20px; padding-top:10px; }
.placeholder_width.projecten {		background:url(/img/back_content_clean.jpg) repeat-x center -50px #fff; border-top:5px solid #e0e1e6; }
.placeholder_width.regular {		background:url(/img/backline.jpg) repeat-x center top #fff; }
.placeholder_width.blog {			 }

.placeholder {
	width:980px;
	margin: 0 auto;
	left: 50%;
	margin-left: -490px; /* - (width/2) */
	position: relative;
	float:left;
}
.placeholder.white { background:white; margin-top:30px; }
.placeholder#locatieroute { margin-bottom:50px; }
.placeholder#overslite { margin-bottom:50px; }
.placeholder#contact { margin-bottom:50px; }
.placeholder#portfolio { margin-bottom:50px; }
.placeholder#category_2 { margin-bottom:50px; }
.placeholder#projecten { margin-bottom:50px; }
.placeholder#twitter { margin-bottom:50px; }
.placeholder#sitemap { margin-bottom:50px; padding:13px 30px; }

.placeholder.projecten .homeimg p { margin:0; }
.placeholder.projecten .homeimg img { display:block; }
.placeholder.projecten .homeimg p a {
	background: none repeat scroll 0 0 #3b4651;
    color: #FFFFFF;
    display: block;
    font-family: Source Sans Pro,Arial;
    font-size: 15px;
    margin: 0;
    padding: 15px;
    text-decoration: none;
	border:none;
}


.placeholder.centered h2 { text-align:center; margin:55px 0 15px 0; }
.placeholder.centered h3 { text-align:center; font-family:Source Sans Pro, Arial; font-style:italic; margin:0 100px; text-transform:none; font-weight:300; color:#999; letter-spacing:0; font-size:21px; line-height:32px;  }

.placeholder.projecten .homeimg p a  { transition: all 0.2s ease-in-out; }
.placeholder.projecten .homeimg:hover p a { background:#252c34; }


.conversebutton { background:#134A83; color:white; width:310px; text-align:center; text-decoration:none; display:block; height:45px; line-height:45px; float:left; font-family:Source Sans Pro, Arial; font-size:15px; margin:45px 0 10px 336px;transition: all 0.2s ease-in-out;  }
.conversebutton:hover { background:#347bb1; }

div.schema { width:217px; float:left; margin-right:15px; }
div.schema img { margin-bottom:20px; }
div.schema h2 { font-size:23px; margin:50px 0 40px 0 !important; text-align:left !important; }
div.schema .blok { display:block; float:left; margin-right:8px; width:18px; height:18px; } 
div.schema span { float:left; font-weight:bold; display:block; width:43px; font-size:16px; margin:0px 0 5px 0; font-family:Source Sans Pro, Arial; }
div.schema p { float:left; display:block; margin:0; }

#header {
	width:973px;
	margin: 0 auto;
	left: 50%;
	margin-left: -486px; /* - (width/2) */
	position: relative;
}

#header .logo { height:89px; width:350px; position:absolute; left:-4px; }
#header .huis { position:absolute; left:14px; margin-top:33px; opacity:0; }

#blog h2 { text-align:left; }
#blog h2.blog-link { transition: all 0.3s ease-in-out; }
#blog h2.blog-link:hover {  color:#FF4800; }
#blog p em { color:#999; }
#blog .lijn { width:100%; height:1px; overflow:hidden; background:#ddd; margin:40px 0 -20px 0; }
#blog .blog-overzicht li { list-style:none; display:block; background:#eee; margin:0 20px 2px -40px; padding:10px 17px; transition: all 0.3s ease-in-out; }
#blog .blog-overzicht li.active { background:#3F7FC5;}
#blog .blog-overzicht li.active a { color:white;}
#blog .blog-overzicht li:hover { background:#ddd;}
#blog .blog-overzicht li a { text-decoration:none; color:#666; }


#footer {
	width:973px;
	margin: 0 auto;
	left: 50%;
	margin-left: -486px; /* - (width/2) */
	position:relative;
	float:left;
	height:160px;
	margin-top:20px;
}

#contact iframe { position:absolute !important; margin:230px 0 0 0 !important; }

#footer a, #landingpage a {
	display:block;
	padding:2px 2px 2px 20px;
	color:#999;
	text-decoration:none;
	height:16px;
	background-image:url(../img/linkdark.png); 
	background-repeat:no-repeat; 
	background-position:1px 6px;
	font-size:12px;
	font-family: Geneva,Arial,Helvetica,sans-serif;
}

#footer a:hover, #landingpage a:hover {
	color:#666;
	background-image:url(../img/link.png); 
}

#footer_new p { text-align:center; font-size:15px; color:#aaa; letter-spacing:1px; word-spacing:3px; text-transform:uppercase;  }
#footer_new p a { border:none; margin:0; padding:0; color:#aaa; }
#footer_new p a:hover {color:#555; }

.hideme { opacity:0; }

/*   HOOFDSTUKKEN   */



#home {}
#home .home_first { height:345px; } 
#home .home_first .main_image { width:646px; height:235px; margin:48px 0 0 -1px; position:absolute; }
#home .home_first .main_image #mygallery-paginate { width: 250px; text-align:center; margin:15px 0 0 190px; position:absolute; }
#home #linkblok { width:280px; height:210px; margin:46px 0 0 652px; position:absolute; padding:10px 15px 15px 25px; overflow:hidden; }
#home #cat_link h1 { font-family:Source Sans Pro, Geneva; font-size:20px; color:#999; font-weight:normal; float:left; margin:15px 10px 0 0; }
#home #cat_link h2 { margin-top:36px; text-transform:none; font-family:'Source Sans Pro', Geneva, Arial, Helvetica, sans-serif; font-size:17px; color:#999; font-weight:normal; float:left; }
#home #cat_link a { float:left; color:#3F7FC5; font-family:'Source Sans Pro', Geneva, Arial, Helvetica, sans-serif; margin:36px 0 0 10px; font-size:16px; }
#home .home_second { height:120px; }

.home_new { background:white; margin-top:-14px; position:relative; z-index:2; }
.home_new h1 { text-transform:uppercase; margin:20px 0; color:#777777; font-size:25px; line-height:27px; font-weight:600; text-align:center; letter-spacing:-0.5px;}
.home_new h1 span { color:#009ca7; }

a.easy  { background:#489ED7; color:white; text-align:center; width:95px; height:30px; line-height:30px; display:block; text-decoration:none; margin:0; font-size:14px; }
a.easy:hover { background:#347bb1; }

img.sr { z-index:10; opacity:0;position:absolute;  }
img#sr1 { top:157px; left:430px; }
img#sr2 { top:220px; left:582px; }
img#sr3 { top:372px; left:646px; }
img#sr4 { top:524px; left:582px; }
img#sr5 { top:587px; left:430px; }
img#sr6 { top:524px; left:278px; }
img#sr7 { top:373px; left:215px; }
img#sr8 { top:220px; left:278px; }


p.srp { z-index:11; color:white; position:absolute; opacity:0; }
p.sr-p1 { text-align:left; top:134px; left:554px;}
p.sr-p2 { text-align:left; top:238px; left:715px;}
p.sr-p3 { text-align:left; top:379px; left:780px;}
p.sr-p4 { text-align:left; top:546px; left:715px;}
p.sr-p5 { text-align:right; top:658px; left:269px;}
p.sr-p6 { text-align:right; top:546px; left:113px;}
p.sr-p7 { text-align:right; top:393px; left:-13px;}
p.sr-p8 { text-align:right; top:238px; left:80px;}


img.webschema { opacity:0; position:absolute; }
#webschema h2 { color:white; margin:163px 0 0 720px; font-weight:500; position:absolute; opacity:0; }
#webschema p { color:white; width:250px; font-size:16px; line-height:24px; margin:217px 0 0 720px; position:absolute; opacity:0; }

#locatieroute {}

#overslite {}

#contact {}

#portfolio {}

#categorie {}

#projecten {}

#twitter {}

#sitemap {}

#jobs {}

#social {}

#toegevoegd {}

#geeninteresse {}




div#infobar div { width:220px; float:left; margin-right:30px; margin-bottom:30px; }
div#infobar div img { float:left; }
div#infobar div h2 { font-size:16px; }
div#infobar div p { display:block; border-top:1px solid #ddd;  border-bottom:1px solid #ddd; float:left; width:100%; margin-top:10px; padding-top:10px; margin-bottom:10px; padding-bottom:15px; }





.case { width:319px; float:left; display:block; margin: 0 7px 7px 0;  }
.case img { display:block; margin:0; }
.case a { transition: all 0.2s ease; display:block; background:#134A83; color:white; padding:15px; text-decoration:none; font-size:15px; font-family:Source Sans Pro, Arial; margin:0; }

.case:hover a.grow { margin-top: -10px; height: 30px; background:#347bb1; }

.case p { display:block; background:#eee; height:40px; padding:15px; font-size:14px; margin:50px 0 0 0; }

.case a.grow { position:absolute; height:20px; display:block; width:289px; }

.fan_box a:hover{
  text-decoration: none;
}
.fan_box .full_widget{
  height: 200px;
  border: 0 !important;
  background: none !important;
  position: relative;
}




/*    MAIN TYPO    */



/* H */

h1 {
	color:#fff;
	font-family:Source Sans Pro, Arial, Verdana, sans-serif;
	font-size:22px;
	letter-spacing:1px;
	text-transform:uppercase;
	margin:0 0 0 0;
	padding:20px 0 0 0;
	font-weight:normal;
}

h2 {
	color:#3f7fc5;
	font-family:Source Sans Pro, Arial, Verdana, sans-serif;
	font-weight:300;
	font-size:32px;
}

h3 {
	color:#ccc;
	font-family:Source Sans Pro, Geneva, Arial, Verdana, sans-serif;
	font-size:22px;
	letter-spacing:1px;
	text-transform:uppercase;
	margin:0 0 0 0;
	padding:20px 0 0 0;
	font-weight:normal;
}

h4 { font-size:14px; color:#3F7FC5; margin-bottom:10px; margin-top:-15px; font-weight:normal; }


/* P, A, SPAN etc */


p, td, li {
	color:#666666;
	font-size:14px;
	font-family:'Source Sans Pro', Geneva, Arial, Helvetica, sans-serif;
	line-height:21px;
	vertical-align:top;
	}

p a {
	color:#3f7fc5;
	text-decoration:none;
	border-bottom:1px dashed #3f7fc5;
	
}

p a:hover {
	text-decoration:none;
	border-bottom:none;
}


/* IMG */

a img {
	border:0px;
	background-image:none; }



/* HOMEPAGE */


.homeitem {
	width:319px;
	height:155px;
	margin-right:7px;
	float:left;
	font-family: Geneva, Arial, Verdana;
	line-height:34px; 
	margin-top:25px;
}

.homeitem p a {
	text-decoration:none;
	border:none;
	color:#666;
	font-size:14px;
	width:319px;
	height:30px;
}

div.quote_text { height:40px; float:right; margin:26px 0 0 0; text-align:right; width:550px;}
div.quote_text p { color:#3F93D0; }
div.quote_text p a { color:#3F93D0; font-weight:700; }



.homeimg {
	margin:15px 7px 15px 0;
	background-repeat:no-repeat; 
	width:319px; 
	height:165px;
	float:left;
	
	}

.homeimg:hover {
	  /* for IE */
  filter:alpha(opacity=90);
  /* CSS3 standard */
  opacity:0.9;
	}
#homepanel {
	background:url(../img/home_kader.png) no-repeat;
	height:186px;
	width:228px;
	position:absolute;
	top:28px;
	left:-19px;
	opacity:0.95;
}

#homepanel #home_kop {
	color:#fff;
	font-family:Source Sans Pro, Arial, Verdana, sans-serif;
	font-size:13px;
	text-transform:uppercase;
	margin:30px 0 0 20px;
}
	
#homepanel #home_tekst {
	color:#ffffff;
	margin:10px 0 0 20px;
	width:180px;
}

#homepanel #home_link {
	background:url(../img/home_link.png) no-repeat left center;
	padding-left:23px;
	display:block;
	height:30px;
	margin:5px 0 0 14px;
	color:#ffffff;
	line-height:30px;
	font-weight:bold;
	text-decoration:none;
}

.slider_tekst { position:absolute; width:500px; height:380px; z-index:987987; margin-left:749px; top:39px; }
.slider_tekst h1 { text-transform:uppercase; color:#ff3000; font-size:25px; line-height:40px; font-weight:600; margin-bottom:-8px;letter-spacing:1px; text-align:center; }
.slider_tekst h2 { color:white; font-style:italic; font-weight:300; font-size:26px; margin:130px auto 40px; display:block; width:100%; text-align:center; line-height:36px; }
.slider_tekst a { background:#009ca7; color:white; text-align:center; width:230px; height:40px; line-height:40px; display:block; text-decoration:none; transition: all 0.5s ease; margin:0 auto; }
.slider_tekst a:hover { background:black; }


/*  MENU */

#menu { float:right; margin-top:2px; }

#menu a {
	display:block;
	color:#3f93d0;
	font-family:Source Sans Pro, Geneva, Arial, Verdana, sans-serif;
	font-size:17px;
	text-decoration:none;
	height:32px;
	line-height:32px;
	padding:0 10px 0 10px;
	letter-spacing:0px;
	float:left;
	margin:1px 2px 0 2px;
	font-weight:400;
	transition: all 0.3s ease;
}

#menu a.active, #menu a.active:hover  {
	color:#ffffff;
	background-color:#134a83;
}

#menu a:hover {
	color:#fff;
	background:#3f93d0;
}

.submenu { float:right; margin:40px 0px 0 0px; width:300px; text-align:right; }
.submenu a { color:#FFFFFF; text-decoration:none; margin:0 0 0 10px; font-size:13px; }
.submenu a:hover { text-decoration:none; border-bottom:1px dashed #fff; }











/*  WERK   */


#projecten p {
	line-height:23px;
	font-size:14px;
	color:#666;
	font-weight:400;
	}

#projecten img {
	}
	
#projecten a {
		padding-left:16px; background-image:url(../img/link.jpg); background-repeat:no-repeat; background-position:2px 5px;
	}	

#projecten h2 { font-size:19px; font-weight:400; font-family: 'Source Sans Pro'; text-transform:none; }


#products {
	width:973px;
	margin: 0 auto;
	left: 50%;
	margin-left: -486px; /* - (width/2) */
	position:relative;
	float:left;
	height:160px;
	margin-top:20px;
}






/*   BUTTONS & FORMS  */


.button_small {
	display:block;
	background:url(../img/button_small.jpg) no-repeat right 9px;
	width:248px;
	height:45px;
	padding-right:30px;
	color:#666666;
	text-decoration:none;
}


.button_small:hover {
	color:#333333;
	background-image:url(../img/button_small_hover.jpg);
}


.veld {
	background-color:#E9E9E9;
	border:none;
	font-family:Arial, Helvetica, sans-serif;
	color:#878787;
	font-size:11px;
	padding:6px;
	margin:3px 0 5px 0;
	border:1px solid #E9E9E9;
}

.button {
	font-family:Arial, Helvetica, sans-serif;
	background-color:#489ed7;
	border:1px solid #489ed7;
	color:#ffffff;
	display:block;
	padding:4px 4px 4px 4px;
	width:100px;
	font-size:12px;
	font-weight:600;
	text-decoration:none;
}

.button:hover {
	background-color:#347bb1;
}


td input, td textarea, td select {
	border:0px;
	background-color:#ddd;
	width:240px;
	padding:6px 7px;
	color:#003;
	border:1px solid #ddd;
	}
	
td input:hover, td textarea:hover, td select:hover, .veld:hover { border: 1px solid #aaa; }

textarea {
	font-size:12px;
	line-height:17px;
	font-family:Arial, Helvetica, sans-serif;
}




/* OVERIG */


.stick {
	position:fixed;
	margin-top:0 !important;
	border-bottom:1px solid #eee;
	opacity:0.95;
}


	
#sitemap a {
	text-decoration:none;
	color:#999999;
	line-height:20px;
}

#sitemap a:hover {
	color:#000;
}











/* STEPCAROUSEL */


.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 646px; /*Width of Carousel Viewer itself*/
height: 235px; /*Height should enough to fit largest content's height*/
margin:0 0 0 0;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
width: 646px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}




/* OVERVIEW LANDINGPAGE */

#overview a.button { width:200px; height:38px; line-height:42px; padding-left:15px;border:none; position:absolute; }
#overview a.button:hover { background:#000; opacity:0.8; }
#overview a.button.blue { background:url(/img/overview/button_blue.jpg) right center no-repeat #5090BF; color:white; right:88px; margin-top:171px;  }
#overview a.button.dark { background:url(/img/overview/button_dark.jpg) right center no-repeat ; color:white; right:88px; margin-top:225px; }
#overview a.button.light { background:url(/img/overview/button_light.jpg) right center no-repeat #c6c6c6; color:black;  right:88px; margin-top:225px; }

#overview ul { margin-left:-27px; float:left; width:295px; }
#overview strong { color:#3F7FC5; }

#formulier { border:1px solid #CCC;  margin:20px 0px 40px 0px; background:#fff; position:absolute; right:0; }
#formulier table { margin:24px; }
#formulier table tr td { vertical-align:top; padding:3px 8px; }
#formulier table tr td input { margin:0; background:#eee;border-radius:4px; }
#formulier table tr td textarea { margin:0; height:106px; margin-top:5px; background:#eee; border-radius:4px; overflow:hidden; }
#formulier table tr td input, #formulier table tr td textarea { width:214px; }
#formulier table tr td input[type='radio'] { width:auto; float:left; margin:12px 7px 0px 0; border:none; background:none;  }
#formulier table tr td input[type='submit'] { background:#3F7FC5; color:white; width:100px; float:right; border-radius:4px; }
#formulier table tr td p { float:left; line-height:10px; }

#overview #balloon p { margin:45px 20px 20px 20px; font-size:15px; line-height:25px; font-family: 'Source Sans Pro';text-transform:none; }
#overview #balloon h3 { position:absolute; margin-left:20px; bottom:14px; font-size:18px; line-height:25px; font-family: 'Source Sans Pro'; text-transform:none; color:#315d8f; letter-spacing:0; }
#overview img.thumb { position:absolute; margin-top:-20px; right:0px; }
#overview div h2 { display:block; text-align:center; width:300px; position:absolute; margin-top:45px; margin-left:334px; color:white; font-size:16px; }
#overview ul { text-align:left; margin-top:70px;  }
#overview ul li {  list-style:url(../img/overview/bullit.png); }

#overview div.website h1 { text-align:left; margin-top:150px; color:white; font-size:37px; font-family: 'Source Sans Pro'; text-transform:none; letter-spacing:0; }
#overview div.website li { color:white; font-size:18px; line-height:28px; font-family: 'Source Sans Pro'; }
#overview div.website img.pijl { position:absolute; margin-top:185px; left:156px; }
#overview div.website #balloon { background:url(../img/overview/text.png) no-repeat; width:310px; height:217px; position:absolute; left:329px; margin-top:54px; }


#overview div.tablet h1 { text-align:left; margin-top:150px; color:#777; font-size:37px; font-family: 'Source Sans Pro'; text-transform:none; letter-spacing:0; }
#overview div.tablet li { color:#888; font-size:18px; line-height:28px; font-family: 'Source Sans Pro'; }
#overview div.tablet img.pijl { position:absolute; margin-top:185px; left:156px; }
#overview div.tablet #balloon { background:url(../img/overview/text2.jpg) no-repeat; width:310px; height:217px; position:absolute; left:329px; margin-top:53px; }


#overview div.contact h1 { text-align:left; margin-top:10px; color:white; font-size:32px; font-family: 'Source Sans Pro'; text-transform:none; letter-spacing:0; margin-left:327px; font-weight:300; }
#overview div.contact p, #overview div.contact p a, #overview div.contact p strong { color:white; }
#overview div.contact #formulier p { color:#666; }
#overview div.contact #formulier p strong, #overview div.contact #formulier p a { color: #5090c0; }

p span.stel { color:#5090c0; font-weight:bold; }






a.scrollup {
    bottom: 40px;
    display: none;
    height: 46px;
    right: 50%;
    margin-right: -366px;
    position: fixed;
    width: 142px;
	background:url(../img/pijl-boven.png) no-repeat left center !important;
	color:#999;
	text-decoration:none; padding-left:35px !important; line-height:46px !important;
}






	#wrapper {
			width:600px; 
			margin:0 auto; 
			border-radius:0 0 5px 5px;
			-moz-border-radius:0 0 5px 5px;
			-webkit-border-radius: 0 0 5px 5px;
			background:#fff; 
			border:1px solid #ccc; 
			padding:25px; 
			border-top:none; 
			box-shadow:0 0 5px #ccc;
			-moz-box-shadow:0 0 5px #ccc;
			-webkit-box-shadow:0 0 5px #ccc;
			text-align:left;
		}
		#lightbox {
			position:fixed; /* keeps the lightbox window in the current viewport */
			top:0; 
			left:0; 
			width:100%; 
			height:100%; 
			background:url(overlay.png) repeat; 
			text-align:center;
		}
		#lightbox p {
			text-align:right; 
			color:#fff; 
			margin-right:20px; 
			font-size:12px; 
		}
		#lightbox img {
			box-shadow:0 0 25px #111;
			-webkit-box-shadow:0 0 25px #111;
			-moz-box-shadow:0 0 25px #111;
			max-width:940px;
		}
		
/* Facebook */


.fb-like-box { float:right; margin-right:25px; padding:0; border:white; position:absolute; }
.fb-container > div {
     margin: -1px 0px 0px -1px;  
}

/* UIT

#actie a {
	width:230px;
	height:40px;
	padding-left:20px;
	font-family: Geneva, Arial, Verdana;
	line-height:43px;
	text-decoration:none;
	color:#999;
	font-size:16px;
	margin:10px 8px 20px 0;
	border:solid #ccc 1px;
	border-radius:8px;
	float:left;
	background: url("../img/linkdark.jpg") no-repeat 223px 19px;
	font-weight:normal;
}

#actie a:hover {
	background-color:#efefef;
	}

p.actievlak { margin-top:7px; line-height:12px;}
p.actievlak span { font-size:10px; font-weight:bold; display:block; padding:4px 8px 2px 8px; float:left; margin-right:8px; background:#999; color:white; margin-top:-8px; line-height:20px; }



*/